<template>
  <div class="template">
    <!-- 搜索栏 -->
    <DynamicMain
      ref="SearchBar"
      :dataModel="$w('SearchBar')"
      @change="searchChange"
    >
      <DynamicMain
        slot="auditAttr"
        :dataModel="$w('SearchBar__AuditAttr')"
        :interactParams="interactParams"
      />
    </DynamicMain>

    <!-- 审计结论 -->
    <DynamicMain :dataModel="$w('Card')">
      <DynamicMain
        slot="button"
        :dataModel="$w('Card__Button')"
        :interactParams="interactParams"
      />
      <DynamicMain
        slot="button"
        :dataModel="$w('Card__Button1')"
        @click="hanldePre"
      />
      <DynamicMain
        ref="Text"
        slot="body"
        :dataModel="$w('Card__Text')"
        :interactParams="interactParams"
      />
    </DynamicMain>

    <!-- 结果展示 -->
    <DynamicMain :dataModel="$w('Card1')">
      <!-- 统计报表Button -->
      <DynamicMain
        slot="button"
        :dataModel="$w('Card1__Button')"
        @click="handleAuditReport"
      />
      <template slot="body">
        <el-row>
          <el-col :span="template.grid.lc">
            <!-- 审计地图 -->
            <DynamicMain
              ref="EcahrtsMap"
              :dataModel="$w('Card1__EcahrtsMap')"
              :interactParams="interactParams"
              @change="mapChange"
            />
          </el-col>
          <el-col :span="template.grid.rc">
            <!-- 统计报表 -->
            <DynamicMain
              v-show="template.tableState"
              ref="Table"
              :dataModel="$w('Card1__Table')"
              :interactParams="interactParams"
            >
              <DynamicMain
                slot="action"
                :dataModel="$w('Card1-Table__DownPopoverBtn')"
                :interactParams="interactParams"
              />
              <i
                slot="action"
                class="iconfont icon-magnify"
                @click="handleMagnify"
              ></i>
              <i
                slot="action"
                class="iconfont icon-close"
                @click="template.tableState = false"
              ></i>
            </DynamicMain>

            <div v-show="!template.tableState">
              <!-- 柱状图 -->
              <DynamicMain
                ref="EcahrtsBar"
                :dataModel="$w('Card1__EcahrtsBar')"
                :interactParams="interactParams"
              />
              <!-- 区域图 -->
              <DynamicMain
                ref="EcahrtsArea"
                :dataModel="$w('Card1__EcahrtsArea')"
                :interactParams="interactParams"
              />
            </div>
          </el-col>
        </el-row>
      </template>
    </DynamicMain>

    <el-dialog
      append-to-body
      :visible.sync="template.dialogVisible"
      title="审计报告预览"
    >
      <DynamicMain
        ref="AuditReport"
        :dataModel="$w('Card__AuditReport')"
        :interactParams="interactParams"
      ></DynamicMain>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="template.dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DynamicMain from '@/components/Widgets/DynamicMain'
import template from '@/mixins/template'

export default {
  mixins: [template],
  components: {
    DynamicMain
  },

  data() {
    return {
      // 模板默认配置
      defaultConfig: {
        compInfos: [
          {
            genId: 'SearchBar',
            type: 'SearchBar',
            attrs: {
              base: {
                style: '',
                titleName: '风险分析'
              },
              data: {
                url: '',
                auto: true,
                responseFunc: 'return res;'
              }
            }
          },
          {
            genId: 'SearchBar__AuditAttr',
            type: 'AuditAttr',
            attrs: {
              data: {
                url: '',
                auto: false,
                responseFunc: 'return res;'
              }
            }
          },
          {
            genId: 'Card',
            type: 'Card',
            attrs: {
              base: {
                title: '审计结论'
              }
            }
          },
          {
            genId: 'Card__Button',
            type: 'Button',
            attrs: {
              base: {
                buttonName: '审计报告下载',
                buttonIcon: 'iconfont icon-report',
                optType: 1
              },
              data: {
                openUrl: ''
              }
            }
          },
          {
            genId: 'Card__Button1',
            type: 'Button',
            attrs: {
              base: {
                buttonName: '预览',
                buttonPlain: true
              }
            }
          },
          {
            genId: 'Card__Text',
            type: 'Text',
            attrs: {
              data: {
                url: '',
                auto: false,
                responseFunc: 'return res.modelConclusion;'
              }
            }
          },
          {
            genId: 'Card__AuditReport',
            type: 'AuditReport',
            attrs: {
              data: {
                url: '',
                auto: false,
                responseFunc: 'return res.textVal;'
              }
            }
          },
          {
            genId: 'Card1',
            type: 'Card',
            attrs: {
              base: {
                title: '结果展示'
              }
            }
          },
          {
            genId: 'Card1__Button',
            type: 'Button',
            attrs: {
              base: {
                buttonName: '统计报表',
                buttonIcon: 'iconfont icon-table'
              }
            }
          },
          {
            genId: 'Card1__EcahrtsMap',
            type: 'EcahrtsMap',
            attrs: {
              base: {
                titleName: '审计地图',
                style: 'height:512px'
              },
              data: {
                url: '',
                auto: false,
                responseFunc: 'return res;'
              }
            }
          },
          {
            genId: 'Card1__Table',
            type: 'Table',
            attrs: {
              base: {
                titleName: '统计报表',
                style: 'height:510px'
              },
              data: {
                url: '',
                auto: false,
                responseFunc: 'return res;'
              }
            }
          },
          {
            genId: 'Card1-Table__DownPopoverBtn',
            type: 'DownPopoverBtn',
            attrs: {
              base: {
                style: ''
              },
              data: {
                openUrl: ''
              }
            }
          },
          {
            genId: 'Card1__EcahrtsBar',
            type: 'EcahrtsBar',
            attrs: {
              base: {
                titleName: '风险地域分布',
                style: 'height:250px'
              },
              data: {
                url: '',
                auto: false,
                responseFunc: 'return res;'
              }
            }
          },
          {
            genId: 'Card1__EcahrtsArea',
            type: 'EcahrtsArea',
            attrs: {
              base: {
                titleName: '违规趋势',
                style: 'height:250px'
              },
              data: {
                url: '',
                auto: false,
                responseFunc: 'return res;'
              }
            }
          }
        ],
        tempInfos: {
          template: 'Template1',
          uuid: '364f9dad-1a55-5857-8597-973e26197f54'
        }
      },
      provName: [
        '北京',
        '天津',
        '河北',
        '山西',
        '内蒙古',
        '辽宁',
        '吉林',
        '黑龙江',
        '上海',
        '江苏',
        '浙江',
        '安徽',
        '福建',
        '江西',
        '山东',
        '河南',
        '湖北',
        '湖南',
        '广东',
        '广西',
        '海南',
        '重庆',
        '四川',
        '贵州',
        '云南',
        '西藏',
        '陕西',
        '甘肃',
        '青海',
        '宁夏',
        '新疆'
      ],
      template: {
        dialogVisible: false,
        tableState: false,
        grid: {
          lc: 12,
          rc: 12,
          magnify: false
        },
        params: {
          prvdInfo: {
            label: '',
            value: ''
          },
          audTrmStart: '',
          audTrmEnd: ''
        }
      }
    }
  },

  computed: {
    // 交互参数
    interactParams() {
      return {
        prvdId: this.template.params.prvdInfo.value,
        audTrmStart: this.template.params.audTrmStart,
        audTrmEnd: this.template.params.audTrmEnd
      }
    }
  },

  methods: {
    // 搜索
    searchChange(val) {
      this.template.params = { ...this.template.params, ...val }

      if (val.prvdInfo.label === '全公司') {
        this.$vm('EcahrtsMap').option.series.map = 'china'
      } else {
        this.$vm('EcahrtsMap').option.series.map = val.prvdInfo.label
      }

      this.insGetData([
        'Text',
        'EcahrtsMap',
        'EcahrtsBar',
        'EcahrtsArea',
        'Table'
      ])
    },
    // 审计报告预览
    hanldePre() {
      this.template.dialogVisible = true
      this.$nextTick(() => {
        this.insGetData(['AuditReport'])
      })
    },
    // 地图改变
    mapChange(val) {
      this.template.params = { ...this.template.params, ...val }

      const searchBarVm = this.$vm('SearchBar')
      // 全国
      if (val.map.name === 'china') {
        searchBarVm.findPrvdInfo(false, false, true)
      } else if (this.provName.includes(val.map.name)) {
        // 省
        searchBarVm.prvdInfo = searchBarVm.findPrvdInfo(val.map.name)
      } else {
        // 市
        this.insGetData(['Text'])
      }
    },
    // 统计报表
    handleAuditReport() {
      this.template.tableState = true
      this.insGetData(['Table'])
    },
    // 实例操作
    insGetData(val) {
      val.forEach(item => {
        if (item === 'Table') {
          if (this.template.tableState) {
            this.$vm(item).getData()
          }
          return
        }

        this.$vm(item).getData()
      })
    },
    // 放大、缩小
    handleMagnify() {
      if (!this.template.grid.magnify) {
        this.template.grid = {
          lc: 0,
          rc: 24,
          magnify: true
        }
      } else {
        this.template.grid = {
          lc: 12,
          rc: 12,
          magnify: false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.iconfont {
  font-size: 18px;
  margin-left: 20px;
  cursor: pointer;
  color: #6f7d95;
}
</style>
